import React, {PropTypes} from 'react';
import gql from 'graphql-tag';
import {connect} from 'react-apollo';
import {
    Row, Col, Collapse,
    Button, Icon, Tooltip,
    Modal, message
} from 'antd';
import Base from '../../base';
import Databases from './database';
import {stop, findParent, getDOMHeight, setMaxHeight} from '../../util';

const mapQueriesToProps = () => ({
    data: {
        query: gql`
            query {
                connections {
                    name, host, port, username, password
                }
            }
        `
    }
});

const mapMutationsToProps = () => ({
    removeConnection: (args) => ({
        mutation: gql`
            mutation remove($name: String!) {
                removeConnection(name: $name)
            }
        `,
        variables: {
            name: args.name
        }
    })
});

@connect({mapQueriesToProps, mapMutationsToProps})
export default class Connection extends Base {
    static propTypes = {
        onModify: PropTypes.func.isRequired,
        setReload: PropTypes.func.isRequired
    };

    state = {
        active: this.context.params.conn
    };

    init() {
        this.data = 'connections';
        this.props.setReload(this.props.data.refetch);
    }

    setMaxHeight() {
        const container = findParent(this.dom, 'container');
        const fixedHeight = getDOMHeight($('>.fixed', container));
        const maxHeight = global.app.main.height - fixedHeight;
        setMaxHeight(this.dom, maxHeight);
    }

    onReload(e) {
        stop(e);
        if (this.reload) {
            this.reload();
        }
    }

    onModify(conn, e) {
        stop(e);
        this.props.onModify(conn);
    }

    onRemove(conn, e) {
        stop(e);
        Modal.confirm({
            title: `确定删除数据库连接配置“${conn.name}”？`,
            onOk: () => {
                this.props.mutations.removeConnection({
                    name: conn.name
                }).then(({errors}) => {
                    if (errors) {
                        message.error(this.error(errors));
                    } else {
                        message.success(`"${conn.name}"已删除`);
                        this.props.data.refetch();
                    }
                });
            }
        });
    }

    done(connections) {
        return (
            <Collapse accordion defaultActiveKey={this.state.active}>
                {connections.map(conn => {
                    const header = (
                        <Tooltip title={`${conn.username}@${conn.host}`} placement="right">
                            <Row type="flex" align="middle">
                                <Col span="12">{conn.name}</Col>
                                <Col span="12" className="right padding-right">
                                    <Button.Group size="small" className="flat">
                                        <Button onClick={this.onRemove.bind(this, conn)}>
                                            <Icon type="cross" className="red"/>
                                        </Button>
                                        <Button onClick={this.onModify.bind(this, conn)}>
                                            <Icon type="edit" className="green"/>
                                        </Button>
                                        <Button
                                            onClick={this.onReload.bind(this)}
                                        >
                                            <Icon type="reload" className="blue"/>
                                        </Button>
                                    </Button.Group>
                                </Col>
                            </Row>
                        </Tooltip>
                    );
                    return (
                        <Collapse.Panel key={conn.name} header={header}>
                            <Databases
                                connection={conn}
                                setReload={reload => {this.reload = reload;}}
                            />
                        </Collapse.Panel>
                    );
                })}
            </Collapse>
        );
    }
}
